<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <meta name="keywords" content="吴静平,web前端工程师,个人主页">
    <title>个人主页</title>
    <link rel="shortcut icon" href="./images/icon.ico"/>
    <!--[if lt IE 9]>
    <script src="js/html5shiv/html5shiv.min.js"></script>
    <![endif]-->
    <script src="js/isIE.js"></script>

    <link rel="stylesheet" href="./css/animate.css"/>
    <link rel="stylesheet" href="./css/bootstrap.css"/>
    <link rel="stylesheet" href="./css/main.css"/>
    <base target="_blank"/>

    <script src="./js/jquery-1.12.0.min.js"></script>
    <script src="./js/rem.js"></script>
    <script src="./js/sea.js"></script>

</head>

<body>
<!--汉堡菜单-->
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid clearfix">
        <div class="navbar-header fl">
            <button type="button" class="navbar-toggle collapsed fr" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <h1 class="navbar-brand">Super.P Home</h1>
        </div>

        <div class="collapse navbar-collapse fr" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#page1" target="_self">Home</a></li>
                <li><a href="#page2" target="_self">Project</a></li>
                <li><a href="#page3" target="_self">About me</a></li>
                <li><a href="#page4" target="_self">Skill</a></li>
            </ul>
        </div>
    </div>
</nav>
<!--导航图标-->
<ul class="connectUl">
    <li class="wobble animated"><a href="#page1" target="_self">
        <span>Home</span>

        <div></div>
    </a></li>
    <li class="bounce animated"><a href="#page2" target="_self">
        <span>My Project</span>

        <div></div>
    </a></li>
    <li class="swing animated"><a href="#page3" target="_self">
        <span>About me</span>

        <div></div>
    </a></li>
</ul>
<!--音乐播放器-->
<audio autoplay id="music" controls loop>
    <source src="./musics/Bad%20Romance.mp3"/>
</audio>
<div id="fullpage">
    <!-- 第一屏 -->
    <div class="section first" id="home">
        <!-- 个人信息-->
        <div class="box">
            <div class="w">
                <a class="homeName" href="javascript:;">Super.P Home</a>

                <div class="hello">
                    <div>
                        <span id="helloText">你好</span>
                    </div>

                    <div>
                        <span id="nameText" style="display: none">我叫吴静平</span>
                    </div>

                    <div>
                        <span id="jobtext" style="display: none">一名前端工程师</span>
                    </div>

                    <div>
                        <span id="adress" style="display: none">现居上海</span>
                    </div>
                </div>
                <img src="images/wanted.png" alt="" class="img" id="wanted"/>
                <!-- 欢迎-->
                <div class="line2" id="line2"></div>
                <div class="line1" id="line1"></div>
            </div>
            <div id="welcome" class="wobble animated">
                <span>Welcome To</span><br/>
                <span>Super.P'home</span>
            </div>
        </div>
    </div>

    <!-- 第二屏 -->
    <div class="section second" id="project">
        <div class="secondBg"></div>
        <div class="w">
            <!-- 项目导航-->
            <div class="project nav clearfix">
                <a class="fl myProject" href="javascript:;">My Protect</a>
                <ul class="fr title" id="secondTitle">
                    <li class="fl"><a href="javascript:;">project1</a></li>
                    <li class="fl"><a href="javascript:;">project2</a></li>
                    <li class="fl"><a href="javascript:;">project3</a></li>
                    <li class="fl"><a href="javascript:;">project4</a></li>
                    <li class="fl"><a href="javascript:;">demo1</a></li>
                    <li class="fl"><a href="javascript:;">demo2</a></li>
                    <li class="fl nowProjectNav"><a href="javascript:;">all-project</a></li>
                </ul>
            </div>
            <!-- 项目内容-->
            <ul class="clearfix content" id="secondContent">
                <li class="li1" id="project-li1">
                    <div>
                        <!-- 背景图-->
                        <div></div>
                        <!-- 遮蔽层-->
                        <div>
                            <a href="http://www.hfbxjy.com/">
                                合肥博行教育<br/>
                                <span class="iconfont">&#xe7b0;</span>
                            </a>
                        </div>
                    </div>
                </li>
                <li class="li2" id="project-li2">
                    <div>
                        <div></div>
                        <div>
                            <a href="http://hkfuten.foodmate.net/">
                                合肥富通机电<br/>
                                <span class="iconfont">&#xe7b0;</span>
                            </a>
                        </div>
                    </div>
                </li>
                <li class="li3" id="project-li3">
                    <div>
                        <div></div>
                        <div>
                            <a href="https://weixin.tjinsuo.com/">
                                T金所<br/>
                                <span class="iconfont">&#xe7b0;</span>
                            </a>
                        </div>
                    </div>
                </li>
                <li class="li4" id="project-li4">
                    <div>
                        <div></div>
                        <div>
                            <a href="http://www.happigo.com/">
                                快乐购<br/>
                                <span class="iconfont">&#xe7b0;</span>
                            </a>
                        </div>
                    </div>
                </li>
                <li class="li5" id="project-li5">
                    <div>
                        <div></div>
                        <div>
                            <a href="http://wjpzm.oschina.io/domo-of-canvas">
                                css3-dome<br/>
                                <span class="iconfont">&#xe7b0;</span>
                            </a>
                        </div>
                    </div>
                </li>
                <li class="li6" id="project-li6">
                    <div>
                        <div></div>
                        <div>
                            <a href="http://wjpzm.oschina.io/domo-of-angular-">
                                angular-demo<br/>
                                <span class="iconfont">&#xe7b0;</span>
                            </a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!-- 第三屏 -->
    <div class="section third" id="about">
        <div class="w clearfix">
            <!-- 个人信息-->
            <div class="info fl" id="info">
                <a class="aboutMe" href="javascript:;">About me</a>

                <div class="detail">
                    <!--个人信息按钮-->
                    <ul class="infoNav clearfix">
                        <li><a href="javascript:;" class="info_btn_now"><span
                                class="iconfont">&#xe608;</span></a></li>
                        <li><a href="javascript:;"><span class="iconfont">&#xe604;</span></a></li>
                        <li><a href="javascript:;"><span class="iconfont">&#xe604;</span></a></li>
                        <li><a href="javascript:;"><span class="iconfont">&#xe604;</span></a></li>
                    </ul>
                    <!--个人信息-->
                    <div class="infoContent">
                        <ul>
                            <li>
                                姓名：吴静平<br/>
                                年龄：26岁<br/>
                                学历：本科<br/>
                                职业：web前端工程师<br/><br/>
                                工作年龄：3年<br/><br/>
                                自我评价：本人对前端编程有着浓厚的兴趣，能够阅读基本的英文文档，
                                喜欢研究js的原理以及当前的流行的前端技术和酷炫的页面特效，自学能力较强，
                                希望能在以后的工作中接触到更多先进的前端技术和更深层次的前端知识。<br/><br/>
                                目前工作状态：正在找工作,随时可以上岗<br/>
                            </li>
                            <li>
                                <h3>项目A：合肥博行教育咨询有限公司官网</h3>
                                项目描述：响应式机构类网站<br/>
                                项目地址：<a href="http://www.hfbxjy.com/">http://www.hfbxjy.com/</a><br/><br/>
                                项目我负责四个模块，分别为：<br/>
                                &nbsp;&nbsp;&nbsp;&nbsp;1. 首页（部分） 固定导航头，轮播图，新闻资讯<br/>
                                &nbsp;&nbsp;&nbsp;&nbsp;2. 学历教育页 主要介绍各种教育和相关资格证考试信息<br/>
                                &nbsp;&nbsp;&nbsp;&nbsp;3. 公司介绍 介绍公司的信息和文化<br/>
                                &nbsp;&nbsp;&nbsp;&nbsp;4. 在线询单 来访用户输入手机号和姓名可以提交留言<br/>
                                项目手机端： 采用响应式布局，展示的模块与PC端基本一致，主要修改了页面排版<br/>
                                使用的技术：html、css、js、zepto、ajax、git、jQuery、Bootstrap<br/>
                                职责描述：负责页面结构的布局和搭建，页面特效展示，负责与后台数据的对接
                            </li>
                            <li>
                                <h3>项目B：TCL互联网金融项目</h3>
                                项目描述：嵌在微信中理财类的H5页面<br/>
                                项目地址：<a href="https://weixin.tjinsuo.com/">https://weixin.tjinsuo.com/</a><br/><br/>
                                项目主要由4大模块组成分别为：<br/>
                                &nbsp;&nbsp;&nbsp;&nbsp;1. 首页 热销产品的展示，活动的轮播<br/>
                                &nbsp;&nbsp;&nbsp;&nbsp;2. 产品列表页 各类产品的展示，包括产品的出售进度<br/>
                                &nbsp;&nbsp;&nbsp;&nbsp;3. 资产页 查看用户的总资产，持仓等<br/>
                                &nbsp;&nbsp;&nbsp;&nbsp;4. 我的 用户的个人信息，投资明细查询等等<br/><br/>
                                使用的技术：html、css、less、seajs、js、zepto、ajax、H5、css3、git<br/>
                                职责描述：负责页面结构的布局和搭建，页面特效展示，负责与后台数据的对接<br/>
                            </li>
                            <li>
                                <h3>项目C名称：快乐购购物网站</h3>
                                网站类型：购物类网站<br/>
                                项目地址：<a href="http://www.happigo.com/">http://www.happigo.com/</a><br/><br/>
                                我主要负责首页和商品分类页面：<br/>
                                &nbsp;&nbsp;&nbsp;&nbsp;1. 首页 热销产品的展示，搜索功能，倒计时功能，商品滑动功能<br/>
                                &nbsp;&nbsp;&nbsp;&nbsp;2. 分类页面 产品的展示，搜索功能，商品滑动功能<br/>
                                使用的技术：html、css、less、seajs、js、zepto、ajax、H5、css3、git<br/>
                                职责描述：负责页面结构的布局和搭建，页面特效及功能实现，负责与后台数据的对接
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 个人技能-->
            <div class="skill fr flipInX animated" id="skill">
                <a href="javascript:;">Slills</a>
                <ul class="skillUl">
                    <li id="skillLi1">
                        <p class="clearfix">
                            <span class="fl">div+css</span>
                            <span class="fr">80%</span>
                        </p>

                        <div class="fl all">
                            <div class="fl get"></div>
                        </div>
                    </li>
                    <li id="skillLi2">
                        <p class="clearfix">
                            <span class="fl">javascript</span>
                            <span class="fr">80%</span>
                        </p>

                        <div class="fl all">
                            <div class="fl get"></div>
                        </div>
                    </li>
                    <li id="skillLi3">
                        <p class="clearfix">
                            <span class="fl">jQuery/zepto</span>
                            <span class="fr">80%</span>
                        </p>

                        <div class="fl all">
                            <div class="fl get"></div>
                        </div>
                    </li>
                    <li id="skillLi4">
                        <p class="clearfix">
                            <span class="fl">h5/css3/canvas</span>
                            <span class="fr">80%</span>
                        </p>

                        <div class="fl all">
                            <div class="fl get"></div>
                        </div>
                    </li>
                    <li id="skillLi5">
                        <p class="clearfix">
                            <span class="fl">less/seajs/gulp/git</span>
                            <span class="fr">40%</span>
                        </p>

                        <div class="fl all">
                            <div class="fl get"></div>
                        </div>
                    </li>
                    <li id="skillLi6">
                        <p class="clearfix">
                            <span class="fl">bootstrap/angular</span>
                            <span class="fr">40%</span>
                        </p>

                        <div class="fl all">
                            <div class="fl get"></div>
                        </div>
                    </li>
                    <li id="skillLi7">
                        <p class="clearfix">
                            <span class="fl">nodejs/vue/react</span>
                            <span class="fr">10%</span>
                        </p>

                        <div class="fl all">
                            <div class="fl get"></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 联系方式-->
        <div class="contact" id="thirdContact">
            <ul>
                <li><a href="javascript:;"><span>tel:</span>18160861545</a></li>
                <li><a href="javascript:;"><span>E-mail:</span>1210698285@qq.com</a></li>
                <li><a href="javascript:;"><span>QQ:</span>1210698285</a></li>
            </ul>
            <div></div>
            <span class="span">welcome to contact me</span>
        </div>
    </div>

    <!-- 第四屏 -->
    <div class="section forth" id="aboutforth">
        <div class="w clearfix">
            <!-- 个人技能-->
            <div class="skill fr flipInX animated" id="skillforth">
                <a href="javascript:;">Slills</a>
                <ul class="skillUl">
                    <li id="skillLi1forth">
                        <p class="clearfix">
                            <span class="fl">div+css</span>
                            <span class="fr">80%</span>
                        </p>

                        <div class="fl all">
                            <div class="fl get"></div>
                        </div>
                    </li>
                    <li id="skillLi2forth">
                        <p class="clearfix">
                            <span class="fl">javascript</span>
                            <span class="fr">80%</span>
                        </p>

                        <div class="fl all">
                            <div class="fl get"></div>
                        </div>
                    </li>
                    <li id="skillLi3forth">
                        <p class="clearfix">
                            <span class="fl">jQuery/zepto</span>
                            <span class="fr">80%</span>
                        </p>

                        <div class="fl all">
                            <div class="fl get"></div>
                        </div>
                    </li>
                    <li id="skillLi4forth">
                        <p class="clearfix">
                            <span class="fl">h5/css3/canvas</span>
                            <span class="fr">80%</span>
                        </p>

                        <div class="fl all">
                            <div class="fl get"></div>
                        </div>
                    </li>
                    <li id="skillLi5forth">
                        <p class="clearfix">
                            <span class="fl">less/seajs/gulp/git</span>
                            <span class="fr">40%</span>
                        </p>

                        <div class="fl all">
                            <div class="fl get"></div>
                        </div>
                    </li>
                    <li id="skillLi6forth">
                        <p class="clearfix">
                            <span class="fl">bootstrap/angular</span>
                            <span class="fr">40%</span>
                        </p>

                        <div class="fl all">
                            <div class="fl get"></div>
                        </div>
                    </li>
                    <li id="skillLi7forth">
                        <p class="clearfix">
                            <span class="fl">nodejs/vue/react</span>
                            <span class="fr">10%</span>
                        </p>

                        <div class="fl all">
                            <div class="fl get"></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 联系方式-->
        <div class="contact" id="forthContact">
            <ul>
                <li><a href="javascript:;"><span>tel:</span>18160861545</a></li>
                <li><a href="javascript:;"><span>E-mail:</span>1210698285@qq.com</a></li>
                <li><a href="javascript:;"><span>QQ:</span>1210698285</a></li>
            </ul>
            <div></div>
            <span class="span">welcome to contact me</span>
        </div>
    </div>
</div>

<script>
    seajs.use('./js/main.js');
</script>
</body>
</html>